<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/admin/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
<!--        <div class="layui-form layui-card-header layuiadmin-card-header-auto">-->
<!--            <div style="text-align: center;line-height: normal">-->
<!--                <div class="layui-inline">-->
<!--                    <input class="layui-input" name="id" id="test-table-demoReload" placeholder="请输入搜索问题"-->
<!--                           autocomplete="off">-->
<!--                </div>-->

<!--                <div class="layui-inline">-->
<!--                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="LAY-user-back-search">-->
<!--                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i><span>搜索</span>-->
<!--                    </button>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="tb">
    <div class="layui-container" style="margin-left:0px;">
<!--        <a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-addition"></i>新增配置</a>-->
    </div>
</script>
<script type="text/html" id="caozuo">
<!--    {{#  if (d.is_show == 0) {  }}-->
<!--    <input type="button" value="启用" class="layui-btn layui-btn-sm" lay-event="qiyong"/>-->
<!--    {{# } else if(d.is_show == 1){  }}-->
<!--    <input type="button" value="禁用" class="layui-btn layui-btn-sm" lay-event="jinyong"/>-->
<!--    {{# } }}-->
    <input type="button" value="编辑" class="layui-btn layui-btn-sm" lay-event="edit"/>
</script>
<script>
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;
    table.render({
        elem: '#t',
        id: 'tt',
        toolbar: '#tb',
        url: '/config/getall'
        ,toolbar: '#tb',
        cols: [[
            {fixed: 'left', field: '', title: '序号', width: 70, type: 'numbers', align: 'center'},
            {field: 'name', title: '配置属性', width: 200, align: 'center'},
            {field: 'value', title: '显示内容', width: 200, align: 'center',templet:function (d) {
                    if(d.type==2){
                        return "<img src='/upload/"+d.value+"' onclick=\"previewImgs(this)\" />";
                    }else if(d.value==null){
                        return  '无';
                    }else{
                        return  d.value;
                    }
                }},
            // {
            //     fixed: 'right', field: 'is_show', align: 'center', title: '状态', width: 120, templet: function (d) {
            //         return d.is_show == 0 ? "<span style='color: red'>已禁用</span>" : "<span style='color: green'>已启用</span>"
            //     }
            // },
            {fixed: 'right', toolbar: '#caozuo', title: '操作', width: 200, align: 'center'}
        ]],
        page: true,
        page: {
            curr: layui.data("thaitrade_kefu_page").index
        },
        done: (res, curr, count) => {
            layui.data("thaitrade_kefu_page", {
                key: 'index',
                value: curr
            });
        }
    });
    // 添加配置
    table.on('toolbar(t)', function (obj) {
        if (obj.event === 'add') {
            layer.open({
                type: 2
                ,title: "添加配置信息"
                ,area: ['90%', '90%']
                ,content: (encodeURI("config/addConfig.html")) //这里content是一个普通的String
                ,end:function () {
                    table.reload("tt")
                }
            });
        }
    });
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
    //右侧按钮的的监听事件
    table.on('tool(t)', function (obj) {
        var getdata = obj.data //获得当前行数据
        var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）
        switch (layEvent) {
            case 'qiyong':
                layer.confirm("确定显示该配置?", ["确定", "取消"], function () {
                    $.ajax({
                        url: '/config/update',
                        type:"post",
                        data: JSON.stringify(getdata),
                        contentType:"application/json",
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg("启用成功", {icon: 1, time: 1000}, function () {
                                    table.reload("tt")
                                });
                            } else {
                                layer.msg(data.msg, {icon: 1, time: 1000});
                            }
                        }
                    })
                });
                break;
            case 'jinyong':
                layer.confirm("确定要禁用该配置?", ["确定", "取消"], function () {
                    $.ajax({
                        url: '/config/update',
                        type:"post",
                        data: JSON.stringify(getdata),
                        contentType:"application/json",
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg("禁用成功", {icon: 1, time: 1000}, function () {
                                    table.reload("tt")
                                });
                            } else {
                                layer.msg(data.msg, {icon: 0, time: 1000});
                            }
                        }
                    })
                });
                break;
            case "edit":
                layer.open({
                    type: 2,
                    area:["90%", "90%"],
                    content: './config/editConfig.html?id='+getdata.id,
                    end:function () {
                        table.reload("tt")
                    }
                })
                break;
        }
    });
</script>
</html>